<template>
  <div class="page-content">
    <div v-wechat-title="$route.meta.title"></div>
      <div>
          <div class="form-content">
              <div class="field-cell row">
                  <span class="cell-title">起始日期 :</span>
                  <input type="text"
                         @click="selectData_start"
                         class="cell-input"
                         readonly
                         v-model="selectedValue_start" />
                  <div class="pickerPop"
                       @touchmove.prevent>
                      <mt-datetime-picker lockScroll="true"
                                          ref="datePicker_start"
                                          v-model="dateVal_start"
                                          class="myPicker"
                                          type="datetime"
                                          year-format="{value}"
                                          month-format="{value}"
                                          date-format="{value}"
                                          hour-format="{value}"
                                          minute-format="{value}"
                                          second-format="{value}"
                                          @confirm="dateConfirm_start()"></mt-datetime-picker>
                  </div>
              </div>
              <div class="field-cell row">
                  <span class="cell-title">截止日期 :</span>
                  <input type="text"
                         @click="selectData_end"
                         class="cell-input"
                         readonly
                         v-model="selectedValue_end" />
                  <div class="pickerPop"
                       @touchmove.prevent>
                      <mt-datetime-picker lockScroll="true"
                                          ref="datePicker_end"
                                          v-model="dateVal_end"
                                          class="myPicker"
                                          type="datetime"
                                          year-format="{value}"
                                          month-format="{value}"
                                          date-format="{value}"
                                          hour-format="{value}"
                                          minute-format="{value}"
                                          second-format="{value}"
                                          @confirm="dateConfirm_end()"></mt-datetime-picker>
                  </div>
              </div>
              <div class="field-cell row">
        <span class="cell-title"
              style="margin-right: 13px;">姓&nbsp;&nbsp;名 :</span>
                  <input type="text"
                         class="cell-input"
                         v-model="name" />
              </div>
              <mt-button type="primary"
                         class="btn"
                         size="small"
                         @click="search()">查询</mt-button>
          </div>
          <!-- 表格 -->
          <div class="table-box bottom-box">
              <!-- <div class="header-title">
                <h3>访客记录</h3>
              </div>-->
              <div class="table-cell-content">
                  <div class="table-tab">
                      <div class="table-header">
                          <div class="contianer row">
                              <span class="th col-xs-2">登记时间</span>
                              <span class="th col-xs-3">登记人员信息</span>
                              <span class="th col-xs-2">来访事由</span>
                              <span class="th col-xs-1">人数</span>
                              <span class="th col-xs-1">体温</span>
                              <span class="th col-xs-2">备注</span>
                              <span class="th col-xs-1">查看</span>
                          </div>
                      </div>
                      <div class="table-content">
                          <table cellspacing="1"
                                 v-if="datatab.length > 0">
                              <tr v-for="(item,index) in datatab"
                                  :key="index"
                                  class="list-tr row">
                                  <td class="time col-xs-2 row">{{item.djsj}}</td>
                                  <td class="time col-xs-3">
                  <span class="cell">
                    <span class="title-info">手机:</span>
                    <span class="content">{{item.phone}}</span>
                  </span>
                                      <span class="cell">
                    <span class="title-info">姓名:</span>
                    <span class="content">{{item.name}}</span>
                  </span>
                                      <span class="cell">
                    <span class="title-info">证件号:</span>
                    <span class="content">{{item.idCard}}</span>
                  </span>
                                  </td>
                                  <td class="time col-xs-2 row">{{item.lfsy}}</td>
                                  <td class="time col-xs-1 row">{{item.txrs}}</td>
                                  <td class="time col-xs-1 row">{{item.tw}}</td>
                                  <td class="time col-xs-2">
                                      <span class="contanier row">{{item.bz}}</span>
                                  </td>
                                  <td class="time col-xs-1 row"
                                      @touchstart="over(item)"
                                      @touchend="out(item)"
                                  >
                                      <img class="eye"
                                           v-if="!item.isShow"
                                           src="../assets/images/icon-eys-close.png"
                                           alt />
                                      <img class="eye"
                                           v-else
                                           src="../assets/images/icon-eys-open.png"
                                           alt />
                                  </td>
                              </tr>
                          </table>
                          <div class="no-info"
                               style="text-align:center;padding: .5rem;font-size:14px;"
                               v-else>暂无数据</div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>
<script>
import "common/css/form.styl";
import wechat from '@/assets/js/wechat.js';// 跳转微信 获取权限
import JSEncrypt from "jsencrypt";
import jsa from "@/assets/js/rsaSecret.js";
export default {
  data () {
    return {
      name: "", //姓名
      pickerValue: "",
      dateVal_start: "", // 默认是当前日期
      selectedValue_start: "",
      dateVal_end: "", // 默认是当前日期
      selectedValue_end: "",
      datatab: [],
    };
  },
  methods: {
    search () {
      this.getRecord();
    },
    selectData_start () {
      // 打开时间选择器
      // 如果已经选过日期，则再次打开时间选择器时，日期回显（不需要回显的话可以去掉 这个判断）
      if (this.selectedValue_start) {
        this.dateVal_start = this.selectedValue_start;
      } else {
        this.dateVal_start = "";
      }
      this.$refs["datePicker_start"].open();
    },
    dateConfirm_start () {
      // 时间选择器确定按钮，并把时间转换成我们需要的时间格式
        if(this.dateVal_start!=""){
            this.selectedValue_start = this.$public.formatDateMin(this.dateVal_start);
        }
    },
    selectData_end () {
          // 打开时间选择器
          // 如果已经选过日期，则再次打开时间选择器时，日期回显（不需要回显的话可以去掉 这个判断）
          if (this.selectedValue_end) {
              this.dateVal_end = this.selectedValue_end;
          } else {
              this.dateVal_end = "";
          }
          this.$refs["datePicker_end"].open();
      },
    dateConfirm_end () {
          // 时间选择器确定按钮，并把时间转换成我们需要的时间格式
          if(this.dateVal_end!=""){
              this.selectedValue_end = this.$public.formatDateMin(this.dateVal_end);
          }

      },
    over (item) {
       item.isShow = !item.isShow;
      if (item.isShow) {
        // 解密
        wechat.setRSADeCode((RSA) => {
          item.phone = RSA(item.rsaSjhm, false);
          item.name = item.rsaXm ? decodeURI(RSA(item.rsaXm, false)) : "";
          item.idCard = RSA(item.rsaZjhm, false);

        })
      } else {
        item.phone = item.sjhm;
        item.name = item.xm;
        item.idCard = item.zjhm;
      }
    },
    out (item) {
         item.isShow = !item.isShow;
          if (item.isShow) {
              // 解密
              wechat.setRSADeCode((RSA) => {
                  item.phone = RSA(item.rsaSjhm, false);
                  item.name = item.rsaXm ? decodeURI(RSA(item.rsaXm, false)) : "";
                  item.idCard = RSA(item.rsaZjhm, false);

              })
          } else {
              item.phone = item.sjhm;
              item.name = item.xm;
              item.idCard = item.zjhm;
          }
      },
    getRecord () {
      let _that = this;
      wechat.setRSA((RSA) => {
        this.$axios.http
          .post({
            funcName: "/fwdj/company/companyRecord",
            params: {
              dwid: sessionStorage.getItem("openId")? sessionStorage.getItem("openId"):"" ,
              djsj_start: this.selectedValue_start,
              djsj_end: this.selectedValue_end,
              xm: this.name ? RSA(encodeURI(this.name), true): "",
              pageIndex: 1,
              pageSize: 100
            }
          })
          .then(res => {
            if (res && res.code == "200") {
              if (res.recordList && res.recordList.length > 0) {
                res.recordList.forEach((item, index) => {
                  item.lfsy = $.pubVariable.visitingReason[item.lfsy]
                  item.isShow = false;
                  item.name = item.xm;
                  item.phone = item.sjhm;
                  item.idCard = item.zjhm;
                });
              }
              _that.datatab = res.recordList;
            } else {
              _that.$public.toast(res.msg);
            }
          });
      })
    },
   // 判断是否注册
    resgister () {
          this.$axios.http
              .post({
                  funcName: "/fwdj/company/isRegister",
                  params: { openId: sessionStorage.getItem("openId") }
              })
              .then(res => {
                  if (res && res.code == "200") { //未注册
                      console.log("未注册");
                    this.$confirm('您尚未注册过单位信息，是否立即注册！', '提示', {
                          confirmButtonText: '是',
                          cancelButtonText: '否',
                          customClass: 'message-logout',
                          type: 'warning'
                      }).then(() => {
                         this.$router.push({ name: "register" });
                          }).catch(()=>{
                        /*this.$router.push({ name: "register" });*/
                    })
                  } else { //已注册
                      console.log("已注册");
                      this.getRecord();
                  }
              });
      },
  },
  mounted () {
      let url = window.location.href;
      wechat.wechatLogin(() => {
          this.resgister();
      }, url);
  }
};
</script>
<style>
    .el-message-box {
        display: flex;
        flex-direction: column;
        margin:0 !important;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        width: 200px;
    }

</style>
<style lang="stylus" scoped>
.form-content
  text-align center
  padding-bottom 20px
  background #fff
  .field-cell
    font-size 12px
    text-align center
    margin 0 30px
    align-items center
    justify-content center
    padding-top 10px
  .cell-input
    border 1px solid #d8d8d8
    border-radius 4px
    margin-left 12px
    font-size 12px
    text-indent 10px
    padding 5px 0
    width 50%
  .btn
    width 35%
    margin 20px auto 0
.table-box
  background-color #f7f7f7
  padding 20px 0 0
  border-radius 0 0 12px 12px
.table-header
  width 100%
  background-color #fff
  -webkit-box-sizing border-box
  box-sizing border-box
  padding-bottom 0
  .contianer
    background-color #dceffc
    padding 0.1rem 0.05rem
    color #65799a
    font-size 0.11rem
    text-align center
    .th
      box-sizing border-box
      font-size 10px
      font-weight 700
      color #65799a
table
  width 100%
tr
  font-size 10px
  color #666
td
  WORD-WRAP break-word
  border 1px solid #d8d8d8
td .contanier
  width 100%
  height 100%
  text-align center
  display flex
  align-items center
  justify-content center
td.row
  text-align center
  display flex
  align-items center
  justify-content center
.table-tab
  border 1px solid #d7dbf8
  .table-content
    background-color #fff
.header-title
  text-align center
  h3
    font-size 17px
.cell
  display block
.eye
  width 90%
</style>